<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>我的账户</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/icons-extra.css" />
        <link rel="stylesheet" type="text/css" href="../css/index.css" />
        <!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css"/>
		<script src="../js/mui.min.js"></script>
		<style>
		    .title{
				margin: 20px 15px 7px;
				color: #6d6d72;
				font-size: 15px;
			}
			 .oa-contact-cell.mui-table .mui-table-cell {
				padding: 11px 0;
				vertical-align: middle;
			}
			
			.oa-contact-cell {
				position: relative;
				margin: -11px 0;
			}
			
			.oa-contact-content {
				width: 100%;
			}
			.oa-contact-name {
				font-size: 15px;
				margin-right: 20px;
				color: #FFFFFF;
				width: 100px;			      
			    overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                margin-left: -20px;
			}
			.oa-contact-name, oa-contact-position {
				float: left;
			}
			.oa-contact-avatar {
				width: 75px;
				
			}
			.oa-contact-avatar img {
				
				border-radius: 50%;
			}

			.mui-navigate-right{font-size: 14px;}
			.one2{background:url(../images/zhi.png) no-repeat 15px 12px;}
			.two2{background:url(../images/yajin.png) no-repeat 15px 12px;}
			
			.three2{background:url(../images/bang.png) no-repeat 15px 12px;}
			
			.four2{background:url(../images/sheng.png) no-repeat 15px 12px;}
			
		</style>
	</head>

	<body>
		<header class="mui-bar mui-table-view" style="box-shadow:none; border: none; background-color: #FFFFFF;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的账户</h1>
			<a class="mui-icon  mui-icon-more-filled mui-pull-right"></a>
		</header>
	    
		<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed"  style="background-color: #e45050;">
			<li class="mui-table-view-cell">
					<div class="mui-slider-cell">
						<div class="oa-contact-cell mui-table" style="margin-left:3%;">
							<div class="oa-contact-avatar mui-table-cell">
								<img src="../images/tou-logo.jpg" width="42" height="42" />
							</div>
							<div class="oa-contact-content mui-table-cell">
								<div>
									<p class="oa-contact-name">张三</p>									
								</div>								
							</div>
						</div>
					</div>
			</li>
	    </ul>
	    
	    <div>
	    	 <ul class="mui-table-view mui-grid-view">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 " style="border-right: 1px solid #EAEAEA;">
		            	<a href="">
		                    <span style="font-size: 15px;">积分</span>
		                    <div style="font-size: 12px;">1200</div>
		            	</a>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 " style="border-right: 1px solid #EAEAEA;">
		            	<a href="#">		                    
		                    <span style="font-size: 15px;">会员等级</span>
		                    <div style="font-size: 12px;">金卡</div>
		            	</a>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4">
		            	<a href="#">
		                    <span style="font-size: 15px;">当前余额</span>
		                    <div style="font-size: 12px;">¥200.00</div>
		            	</a>
		            </li>		           
	    </div>
	    
	    <div class="mui-content">
			<ul class="mui-table-view">
				 <li class="mui-table-view-cell"><a href="yu-x.html" class="mui-navigate-right one2" style="padding-left: 45px; ">账户余额</a></li>
		         <li class="mui-table-view-cell"><a href="yajin.html" class="mui-navigate-right two2" style="padding-left: 45px;">我的押金</a></li>
		         <li class="mui-table-view-cell"><a href="bank.html" class="mui-navigate-right three2" style="padding-left: 45px;">储值卡绑定</a></li>
		         <li class="mui-table-view-cell"><a href="hui-sheng.html" class="mui-navigate-right four2" style="padding-left: 45px;">会员卡升级</a></li>
			</ul>
			
		</div>
		
	    <script>
		    mui.init({
			    swipeBack:true //启用右滑关闭功能
		    });
	    </script>
	</body>

</html>